<template>
	<view class="all">
		<u-navbar :is-back="true" title="我的資料" title-bold />
		<view class="body" v-if="listuser">
			<view class="body_1">
				<text>頭像</text>
				<image :src="listuser.avatar" style="width: 94.6rpx;height: 94.6rpx;border-radius: 100rpx;" />
			</view>
			<view class="body_2">
				<text>昵稱</text>
				<input :disabled="true" placeholder-class="placeholderclass" type="text" v-model="listuser.nickname"
					placeholder="請輸入昵稱" />
			</view>
			<view class="body_2">
				<text>姓名</text>
				<input placeholder-class="placeholderclass" type="text" v-model="listuser.username"
					placeholder="請輸入您的姓名" />
			</view>
			<view class="body_2">
				<text style="margin-bottom: 25rpx;">性別</text>
				<view class="sr" @click="show2 = true" style="display: flex;justify-content: space-between;align-items: center;">
					<input border :disabled="true" v-model="sex" type="select"  />
					<image  v-if="!show2" src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-13/164718684962601.png" 
					style="width: 30rpx; height:30rpx;"
					/>
					<image  v-if="show2" src="https://junhe-project.oss-cn-beijing.aliyuncs.com/img/2022-03-13/164718696678469.png"
					style="width: 30rpx; height:30rpx;"
					/>
				</view>
				<u-action-sheet :list="actionSheetList" v-model="show2" @click="actionSheetCallback"></u-action-sheet>
				<!-- <xfl-select
				 @change="change"
				 :list="list" :clearable="false" :showItemNum="5" 
		:style_Container="'height: 80rpx; font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;color: #999999'"
	:placeholder="'请选择性别'" :initValue="listuser.sex==1?'男':'女'" :selectHideType="'hideAll'">
				</xfl-select> -->
			</view>
			<view class="body_2" @click="showtime=true">
				<text>出生日期</text>
				<view class="body_2_1">
					<text v-if="!listuser.birthday">請輸入出生日期</text>
					<text v-else>{{listuser.birthday}}</text>
				</view>
			</view>
			<view class="body_2" @click="show=true">
				<text>綁定手機號</text>
				<view class="body_2_1">
					<text v-if="!listuser.mobile">請輸入手機號</text>
					<text v-else>{{listuser.mobile}}</text>
				</view>
			</view>
			<view class="body_1">
				<text>綁定抖音</text>
				<text>立即綁定</text>
			</view>
			<view class="body_1" style="border: none;">
				<text>綁定微信</text>
				<text class="body_1_20">立即綁定</text>
			</view>
			<view class="body_4" @click="tijiao">
				确定
			</view>
		</view>
		<u-picker mode="time" @confirm="confirm" v-model="showtime" :show-time-tag="false" confirm-color='#00795E' />
		<u-popup v-model="show" mode="bottom">
			<!-- //手机号 -->
			<view class="warp">
				<view class="warp_1">
					<text @click="show=false">取消</text>
					<text>確認</text>
				</view>
				<view class="warp_2">
					<text>原手機號：</text>
					<text>159****5449</text>
				</view>
				<view class="warp_3">
					<text>原手機號：</text>
					<input placeholder-class="placeholderclass" type="text" value="" placeholder="請輸入原手機號" />
					<text class="t">6s獲取驗證碼</text>
				</view>
				<view class="warp_3">
					<text>驗證碼：</text>
					<input placeholder-class="placeholderclass" type="text" value="" placeholder="請輸入驗證碼" />
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		timeFormat
	}
	from "@/untils/filters.js"
	export default {
		data() {
			return {

				// :'',
				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					},
				],
				info: {},
				show: false,
				show2: false,
				showtime: false,
				list: [
					'男',
					'女',
				],
			};
		},
		onLoad() {
			this.getinfo()
		},
		computed: {
			sex() {
				if (this.listuser.sex == 1) {
					return "男"
				} else {
					return "女"
				}
			},
			listuser() {
				if (this.$store.state.ziti == 1) {
					return this.info.simple
				} else {
					return this.info.multiply
				}
			},
		},
		methods: {
			//提交
			tijiao() {
				this.api('usermsg/userUpdate', {
					name: this.listuser.username,
					sex: this.listuser.sex,
					birthday: this.listuser.birthday,
				}).then(res => {
					this.$toast(res.msg)
				})
			},
			// 手机号

			//性别
			actionSheetCallback(index) {
				const value = this.actionSheetList[index].text;
				if (value == "男") {
					this.listuser.sex = 1
				} else {
					this.listuser.sex = 0
				}
			},
			getinfo() {
				this.api('usermsg/userEdit').then(res => {
					this.info = res.data
				})
			},
			//生日
			confirm(a, b) {
				this.listuser.birthday = `${a.year}-${a.month}-${a.day}`
			},
			change(a, b) {
				console.log(a.orignItem)
			},
		}
	}
</script>

<style lang="scss">
	/deep/.uni-input-input {
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.sr {
		height: 89rpx;
		background: #FFFFFF;
		padding-left: 30rpx;
		border: 1rpx solid #E1E1E1;
		display: flex;
		padding-right: 30rpx;
		input{
			margin-top: 2rpx !important;
			padding: 0 !important;
			border: none !important;
		}
		
	}

	.warp {
		height: 525rpx;
		background: #FFFFFF;
		padding: 30rpx;

		.warp_3 {
			margin-top: 30rpx;
			width: 690rpx;
			height: 89rpx;
			background: #FFFFFF;
			padding-left: 30rpx;
			border: 1rpx solid #E1E1E1;
			display: flex;

			align-items: center;

			/deep/ .placeholderclass {
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}

			.t {
				font-size: 22rpx;
				font-family: OPPOSans;
				font-weight: 400;
				color: #333333;
				width: 155rpx;
				height: 50rpx;
				background: rgba($color: #E1E1E1, $alpha: 0.5);
				display: inline-block;
				line-height: 50rpx;
				text-align: center;
				border-radius: 8rpx;
			}
		}

		.warp_2 {
			width: 690rpx;
			margin-top: 30rpx;
			height: 89rpx;
			background: #FFFFFF;
			padding-left: 30rpx;
			border: 1rpx solid #E1E1E1;
			display: flex;

			align-items: center;

			input {}



			text:nth-of-type(1) {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 600;
				color: #181818;
			}

			text:nth-of-type(2) {
				margin-left: 15rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}

			text:nth-of-type(3) {
				font-size: 22rpx;
				font-family: OPPOSans;
				font-weight: 400;
				color: #333333;
				width: 145rpx;
				height: 50rpx;
				background: rgba($color: #E1E1E1, $alpha: 0.5);
				display: inline-block;
				line-height: 50rpx;
				text-align: center;
				border-radius: 8rpx;
			}
		}

		.warp_1 {
			display: flex;
			justify-content: space-between;

			text:nth-of-type(1) {
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #181818;
			}

			text:nth-of-type(2) {
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #00795E;

			}
		}
	}

	.body {
		padding: 30rpx;

		.body_4 {
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			height: 80rpx;
			background: #00795E;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
		}

		.body_2 {
			padding: 30rpx 0 0rpx 0;

			.body_1_20 {
				width: 148rpx;
				height: 60rpx;
				background: #FFFFFF;
				border: 1rpx solid #00795E;
				border-radius: 30rpx;
			}

			.body_2_1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 25rpx;
				height: 80rpx;
				background: #FFFFFF;
				padding-left: 20rpx;
				border: 1rpx solid #E1E1E1;

				text:nth-of-type(1) {
					font-size: 24rpx;

					font-family: Source Han Sans CN;

					font-weight: 400;

					color: #999999;
				}

			}

			text:nth-of-type(1) {
				display: block;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #181818;
			}


			/deep/ .placeholderclass {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}

			input {
				margin-top: 25rpx;
				height: 80rpx;
				background: #FFFFFF;
				padding-left: 20rpx;
				border: 1rpx solid #E1E1E1;
			}
		}

		.body_1 {
			display: flex;
			padding: 30rpx 0 30rpx 0;
			min-height: 130rpx;
			// -bottom
			border-bottom: 1rpx solid #EDEDED;
			align-items: center;
			justify-content: space-between;

			text:nth-of-type(2) {
				width: 148rpx;
				height: 60rpx;
				background: #00795E;
				line-height: 60rpx;
				text-align: center;
				border-radius: 30rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}

			text:nth-of-type(1) {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #181818;
			}
		}
	}
</style>
